<template>
  <div class="box">
    <van-nav-bar title="专栏详情" left-arrow @click-left="$router.go(-1)" />
    <div class="list">
      <h3 v-html="obj.title"></h3>
      <img :src="obj.pic" alt="" />
      <div v-html="obj.content"></div>
    </div>
    <love></love>
  </div>
</template>

<script>
import { details } from "@/api/user";
import { useRoute } from "vue-router";
import { ref } from "vue";
import love from "../love/love.vue";
export default {
  setup() {
    let obj = ref("");
    let route = useRoute();
    console.log(route.query.id);
    details(route.query.id).then((res) => {
      console.log(res);
      obj.value = res;
    });
    return {
      obj,
    };
  },
  components: {
    love,
  },
};
</script>

<style lang="scss" scoped>
.box{
  width: 100%;
  padding: 0 8px;
}
.list {
  color: rgb(88, 86, 86);
  img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
  }
  font-size: 30px;
  h3 {
    margin: 90px 0 40px 0;
    text-align: center;
    font-size: 50px;
  }
}
::v-deep p {
  margin: 10px 0;
  text-indent: 70px;
  line-height: 70px;
  font-family: "微软雅黑";
}
</style>
